<template>
  <span class="enum-option">
    <el-dropdown @command="handleCommand">
    <i class="enum-option-icon el-icon-setting"></i>
    <el-dropdown-menu slot="dropdown">
      <template v-if="isSuperAdmin">
        <el-dropdown-item command="ADD" v-if="!model.isFile">添加</el-dropdown-item>
        <el-dropdown-item command="EDIT">修改</el-dropdown-item>
        <el-dropdown-item command="REMOVE" v-if="model.children.length === 0">删除</el-dropdown-item>
      </template>
      <el-dropdown-item command="DETAIL">详情</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
  </span>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import EnumModel from '@/models/EnumModel'
  import { EnumOptionType } from './types'
  import { Getter } from 'vuex-class'

  @Component({})
  export default class EnumBaseCom extends Vue{

    @Prop(Object) model!: EnumModel
    @Getter('isSuperAdmin') isSuperAdmin!: boolean

    handleCommand(type: EnumOptionType) {
      this.$emit('enumOptionClick', {
        type: type,
        model: this.model
      })
    }
  }
</script>

<style scoped lang="scss">
.enum-option {
  position: absolute;
  right: 36px;
  top: -3px;
  .enum-option-icon {
    font-size: 20px;
  }
  .enum-option-icon:hover {
    color: #fff;
  }
}
</style>
